import 'package:elephant_fish/util/size_util.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class IndexTitleBoPage extends StatefulWidget {
  final String categoryName;
  const IndexTitleBoPage({Key key, this.categoryName}) : super(key: key);

  @override
  _IndexTitleBoPageState createState() => _IndexTitleBoPageState();
}

class _IndexTitleBoPageState extends State<IndexTitleBoPage> {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor:  Color(0xff1b1b1b),
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                width: double.infinity,
                height: SizeUtil.px(330),
                decoration: BoxDecoration(
                  image:DecorationImage(
                      image: AssetImage('assets/images/title_bg.png')
                  ) ,
                ),
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment.topLeft,
                      child: Padding(
                        padding: EdgeInsets.only(left: SizeUtil.px(75),top: SizeUtil.px(180)),
                        child: Text('当月累计充值¥2000',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xff88582c)),),
                      ),
                    ),
                    Align(
                      alignment: Alignment.center,
                      child: Padding(
                        padding: EdgeInsets.only(top: SizeUtil.px(80)),
                        child: Image.asset('assets/images/title_bojue.png',width: SizeUtil.px(129),height: SizeUtil.px(148),),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: EdgeInsets.only(top: SizeUtil.px(340)),
                child: Text('本月已充值：0元',style: TextStyle(fontSize: SizeUtil.px(23),color: Color(0xffe5d1b2)),),
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Padding(
                  padding: EdgeInsets.only(top: SizeUtil.px(390)),
                  child: Container(
                    width: SizeUtil.px(202),
                    height: SizeUtil.px(60),
                    decoration: BoxDecoration(
                        color: Color(0xffff215d),
                        borderRadius: BorderRadius.circular((30.0))
                    ),
                    child: Align(
                      alignment: Alignment.center,
                      child: InkWell(
                        child: Text( '立即开通',
                            style: TextStyle(color: Color(0xffffffff), fontSize: SizeUtil.px(24))),
                        onTap: (){
                          print('立即开通');
                        },
                      ),
                    ),
                  )
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: EdgeInsets.only(top: SizeUtil.px(493)),
                child: Image.asset('assets/images/title_xian.png',width: size.width - SizeUtil.px(126),),

              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Padding(
                  padding: EdgeInsets.only(top: SizeUtil.px(465)),
                  child:Text('专属特权3/9',style: TextStyle(color: Color(0xfff3c485),fontSize: SizeUtil.px(36),fontWeight: FontWeight.bold),)

              ),
            ),
            Padding(padding: EdgeInsets.only(top: SizeUtil.px(560)),
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Padding(padding: EdgeInsets.only(right: SizeUtil.px(400)),
                      child: Column(
                        children: [
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: 0),
                                child: Image.asset('assets/images/title_gold_qian.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(10)),
                                child: Text('排名靠前',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xffe5d1b2)),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(2)),
                                child: Text('彰显尊贵',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Column(
                      children: [
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: 0),
                              child: Image.asset('assets/images/title_gold_xunzhang.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                            )
                        ),
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(10)),
                              child: Text('勋章',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xffe5d1b2)),),
                            )
                        ),
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(2)),
                              child: Text('专属标识',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                            )
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: Padding(padding: EdgeInsets.only(left: SizeUtil.px(400)),
                      child: Column(
                        children: [
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: 0),
                                child: Image.asset('assets/images/title_gold_head.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(10)),
                                child: Text('仙族头像框',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xffe5d1b2)),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(2)),
                                child: Text('彰显财富',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Padding(padding: EdgeInsets.only(top: SizeUtil.px(780)),
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Padding(padding: EdgeInsets.only(right: SizeUtil.px(400)),
                      child: Column(
                        children: [
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: 0),
                                child: Image.asset('assets/images/title_grey_qipao.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(10)),
                                child: Text('发言气泡 ',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xfff3f3f3)),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(2)),
                                child: Text('仙气十足',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Column(
                      children: [
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: 0),
                              child: Image.asset('assets/images/title_grey_liang.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                            )
                        ),
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(10)),
                              child: Text('可选靓号',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xfff3f3f3)),),
                            )
                        ),
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(2)),
                              child: Text('靓丽非凡',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                            )
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: Padding(padding: EdgeInsets.only(left: SizeUtil.px(400)),
                      child: Column(
                        children: [
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: 0),
                                child: Image.asset('assets/images/title_grey_jin.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(10)),
                                child: Text('炫酷进场',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xfff3f3f3)),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(2)),
                                child: Text('尊贵非凡',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Padding(padding: EdgeInsets.only(top: SizeUtil.px(1000)),
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Padding(padding: EdgeInsets.only(right: SizeUtil.px(400)),
                      child: Column(
                        children: [
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: 0),
                                child: Image.asset('assets/images/title_grey_danmu.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(10)),
                                child: Text('隐榜',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xfff3f3f3)),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(2)),
                                child: Text('彰显尊贵',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Column(
                      children: [
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: 0),
                              child: Image.asset('assets/images/title_fangjin.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                            )
                        ),
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(10)),
                              child: Text('防踢防禁言',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xfff3f3f3)),),
                            )
                        ),
                        Align(alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(2)),
                              child: Text('霸道权利',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                            )
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: Padding(padding: EdgeInsets.only(left: SizeUtil.px(400)),
                      child: Column(
                        children: [
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: 0),
                                child: Image.asset('assets/images/title_grey_mingpian.png',width: SizeUtil.px(91),height: SizeUtil.px(91),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(10)),
                                child: Text('隐身',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xfff3f3f3)),),
                              )
                          ),
                          Align(alignment: Alignment.topCenter,
                              child: Padding(
                                padding: EdgeInsets.only(top: SizeUtil.px(2)),
                                child: Text('彰显财富',style: TextStyle(fontSize: SizeUtil.px(20),color: Color(0xff818181)),),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(height: SizeUtil.px(40),)
          ],
        ),
      ),
    );
  }
}
